<template>
  <div id="mainportal" class="container" style="background-color: #fff;padding-top:20px;">

  <comhead title="零件号查询" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   
  <div style='box-sizing:border-box;display:flex;align-items:center;background-color:#fff;border: 1px solid #e5e5e5;   border-radius: 5px;margin:0 20px 10px 20px '>
    <div style='padding:5px 10px;display: flex;justify-content: center;align-items: center;' catchtap='filterImage'>


    </div>
     <!-- value='{{oem}}'  -->
    <input style='flex:1;padding-right: 10px;font-size:14px;' v-model="oem" placeholder='输入产品编码，OEM，D码' maxlength="17" bindinput='handleInpue'/>
    <div class='next' @click='oemFilter()' :style="'background-color:'+ $store.getters.getMerchant.themeColors">
      <img src='../../image/4.png' style='width:20px;height:20px;'/>
    </div>
  </div>


  <div class='tagLabel' style='margin:10px 0; ' v-if="tagList.length>0">热：</div>


  <div class='tagLabel'>
      <!-- data-word='{{item.word}}' -->
    <div v-for="(item,index) in tagList" class='tag' @click='setHotWord(item.word)' >
      {{item.word}}
    </div>
  </div>


  <div style='font-size:14px;padding:0 0 10px 20px;  border-bottom: solid #e5e5e5 1px;' v-if="OemStoryList.length>0">
    历史记录
  </div>

  <div class='car_item' v-for="(item,index) in OemStoryList" @click='setOemOverFilter(item.goodsId,index)' >
<!-- mode='widthFix' -->
    <img :src='item.logoUrl' style='width:90px;margin:10px 15px 10px 0;' />
    <div style='flex:1;'>
      <div>{{item.goodsName}}
        <span v-if="item.goodsModelNumber!=''||item.goodsModelNumber">({{item.goodsModelNumber}})</span>
      </div>

      <div :style="'color:' + $store.getters.getMerchant.themeColors">查询成功</div>
      <div class='inconsequential'> {{item.oemCode}}</div>
    </div>
    <div>
        <!-- data-index='{{index}}' -->
      <img src='../../image/50.png' @click.stop='delStoryItem(index)'  class='delStoryCar' style='width:13px; height:13px;'/>
      <div>　</div>
      <div class='inconsequential' style='margin-right:5px;'>{{item.queryTime}}</div>
    </div>
  </div>


<div v-if="queryModel" style=' display: flex;align-items:center;justify-content: center;position: fixed;bottom: 0; z-index: 999;background-color: rgba(0, 0, 0, 0.498039);height: 100%;width: 100%;'>


  <div class='centerContent'>

    <div style='color:#999999;padding:10px 0; text-align:center;border: solid 1px #e5e5e5; border-top-left-radius: 8px;  border-top-right-radius: 8px;'>
      <span>{{returnMessage}}</span>
    </div>
    <div :style="returnList.length>5?'height:50vh':''">
      <scroll-div scroll-y="true" style="height:100%">

<!-- data-goodsid='{{item.goodsId}}' data-index='{{index}}' -->
        <div v-for="(item,index) in returnList" class='winfloat item-content1' @click='setOemOverFilter1(item.goodsId,index)'
        style="font-size:14px;" >
          <img :src='item.logoUrl' style="width:50px;height:50px;margin:0 10px;"/>
          <div style='flex:1; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;  '>
            <div>{{item.goodsName}}
              <span v-if="item.goodsModelNumber!=''||item.goodsModelNumber">({{item.goodsModelNumber}})</span>
            </div>

          </div>
          <img src='../../image/back.png' style="width:20px;height:20px;margin:8px;"/>
        </div>
      </scroll-div>
    </div>
    <div class='item-content1 close' style="padding:10px 0;" :style="'color:' + $store.getters.getMerchant.themeColors" @click='close()'>
      <span>关闭</span>
    </div>
  </div>
</div>





  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
     returnList: [],
    themeColors: '',
    tagList: [
    ],
    oem: '',
    returnMessage: "",
    queryModel: false,
    OemStoryList: []
    };
  },
  computed: {},

  methods: {
      
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    },
      close() {
   this.queryModel = !this.queryModel
  },
getDateDiff(dateTimeStamp) {
      var result;
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - dateTimeStamp;
      if (diffValue < 0) {
        return;
      }
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;
      if (monthC >= 1) {
        if (monthC <= 12) result = "" + parseInt(monthC) + "月前";
        else {
          result = "" + parseInt(monthC / 12) + "年前";
        }
      } else if (weekC >= 1) {
        result = "" + parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
        result = "" + parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
        result = "" + parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
        result = "" + parseInt(minC) + "分钟前";
      } else {
        result = "刚刚";
      }

      return result;
    },
    setOemOverFilter(goodsid ,index){
    this.setOemFilter(goodsid)

    },
     delStoryItem(index) {
    let self = this
    let storage = window.localStorage
    this.removeByValue(this.OemStoryList, this.OemStoryList[index])
   storage.modelOem = JSON.stringify(this.OemStoryList)
    this.queryOemStroy()
  },
      setOemOverFilter1(goodsid ,index) {
        let modelOem = this.OemStoryList
      let a = {
        createTime: new Date(),
        goodsId: this.returnList[index].goodsId,
        oem: this.oem,
        goodsName: this.returnList[index].goodsName,
        goodsModelNumber: this.returnList[index].goodsModelNumber,
        logoUrl: this.returnList[index].logoUrl,
        oemCode: this.returnList[index].oemCode
      }
      modelOem.forEach((model, modelIndex) => {
        if (model.goodsId == a.goodsId) {
          this.removeByValue(modelOem, model)
        }
      });
      if (modelOem.length > 30) {
        this.removeByValue(modelOem, modelOem[modelOem.length - 1])
      }
      modelOem.unshift(a)
      let storage  = window.localStorage
   storage.modelOem  = JSON.stringify(modelOem)
    this.setOemFilter(goodsid)
      this.close()
  },
    oemFilter() {
    if (this.oem === '') {
      return
    }
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });

    let self = this
      let url = this.$baseUrl.bizUrl + '/goods/search';
    let data = {
      merchantId:  this.$store.getters.getMerchant.merchantId,
      oem: this.oem
    }
    let callBack = (res) => {
            Indicator.close();


      if (res == null) {
        console.log("网络请求错误！");
        return;
      }
      if (res.data.status != 200) {
        console.log("请求数据错误11");
        return;
      }

      if (res.data.data.length === 0) {
          this.returnMessage= "未找到相应信息"
          this.queryModel=!this.queryModel
      } else if (res.data.data.length === 1) {
        let modelOem = this.OemStoryList
        let a = {
          createTime: new Date(),
          goodsId: res.data.data[0].goodsId,
          oem: this.oem,
          goodsName: res.data.data[0].goodsName,
          goodsModelNumber: res.data.data[0].goodsModelNumber,
          logoUrl: res.data.data[0].logoUrl,
          oemCode: res.data.data[0].oemCode
        }
        modelOem.forEach((model, modelIndex) => {
          if (model.goodsId == a.goodsId) {
            this.removeByValue(modelOem, model)
          }
        });
        if (modelOem.length > 30) {
          this.removeByValue(modelOem, modelOem[modelOem.length - 1])
        }
        modelOem.unshift(a)
          let storage = window.localStorage;
      storage.modelOem =  JSON.stringify(modelOem)
        this.setOemFilter(res.data.data[0].goodsId)

      } else {


          this.$router.push(
            {
              name:'productlist',
              query:{
                OemNumber:this.oem
              }
            }
          )

          // this.returnMessage= "匹配到以下结果，请选择查看"
          // this.returnList= res.data.data
          // this.queryModel= !this.queryModel


      }


    }
      this.$reqFormPost(url, data, callBack);

  },
   setOemFilter(goodsId) {
             this.$router.push("/productdetail?id=" + goodsId );
  },
    removeByValue(arr, val) {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] == val) {
        arr.splice(i, 1);
        break;
      }
    }
  },
    setHotWord(word){
this.oem = word
    },
 getHotWord(){
      let self = this;
      let url = this.$baseUrl.bizUrl  + '/hotword/query';
    let data = {
      merchantId:  this.$store.getters.getMerchant.merchantId,
    }
    let callBack = (res) => {
      if (res == null) {
        console.log("网络请求错误！");
        return;
      }
      if (res.data.status != 200) {
        console.log("请求数据错误11");
        return;
      }
        this.tagList=  res.data.data
    }
      this.$reqFormPost(url, data, callBack);
 },
   queryOemStroy() {
         let self = this
        let storage = window.localStorage
       console.log(1,storage)
        let a = storage.modelOem
       let StoryItem = a?JSON.parse(storage.modelOem):[]
        StoryItem.forEach((item, index) => {
          Object.assign(item, { queryTime: self.getDateDiff(new Date(item.createTime).getTime()) })
        })
          this.OemStoryList =  StoryItem
   }
  },
  mounted() {
    this.getHotWord()
    this.queryOemStroy()
       document.title = 'OEM查询'


  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>

.winfloat {
  padding: 10px 0;
  display: flex;
  border-bottom: solid 1px #e5e5e5;
  align-items: center;
  font-size: 12px;
}
.inconsequential{
  font-size:12px;
  color:#999;
}
.delStoryCar{
  position: absolute;
  right: 10px;
  top: 10px;
  padding:5px;
}
.car_item{
  position: relative;
  border-bottom: solid #e5e5e5 1px;
  display: flex;
  align-items: center;
  font-size: 14px;
  justify-content: space-between;
  margin-left: 20px;
}
.close {
  color: #039ecb;
  padding: 10px 0;
  text-align: center;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.item-content1:active {
  background-color: #f7f7f7;
}


.centerContent {
  background-color: #fff;
  border-radius: 8px;
  width: 70%;
  font-size: 14px;
}

.bankMessage {
  position: relative;
  top: -12px;
  background: #f3f3f3;
  width: 3em;
}

input-placeholder {
  font-size: 14px;
}

.next {
  font-size: 14px;
  color: #fff;
  padding: 10px 15px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.tagLabel {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  align-items: center;
}

.tag {
  box-sizing: border-box;
  border: #e5e5e5 solid 1px;
  padding: 5px 10px;
  margin-right:15px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.tag:active{
  background-color:#f5f5f5;
color:#999;

}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
